<template>
  <div class="favorite" v-if="list.length > 0">
    <el-tabs class="tab-content" v-model="active">
      <el-tab-pane
        v-for="item of list"
        :label="item.name"
        :name="item.preference + ''"
        :key="item.id"
      >
        <ul class="info-list" v-if="item.bookList && item.bookList.total > 0">
          <list-template
            v-for="val of item.bookList.records"
            :key="val.bookId"
            :item="val"
            :diff="'home-favorite'"
          />
        </ul>
        <div class="empty" v-else>
          <span>No resources available</span>
        </div>
        <p
          class="load-more"
          v-if="item.bookList && item.bookList.current < item.bookList.pages"
          @click="loadMore(item.preference)"
        >
          More
        </p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import listTemplate from "@/components/common/listTemplate/Index";
export default {
  data() {
    return {
      list: [], // 总列表
      params: {
        1: {
          //男频参数
          pageNum: 1,
          pageSize: 30,
        },
        2: {
          //女频参数
          pageNum: 1,
          pageSize: 30,
        },
      },
      active: "2", //默认选中频道
    };
  },
  components: {
    listTemplate,
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.favorite();
  },
  methods: {
    toggleNav(active) {
      this.active = active + "";
    },
    async favorite(preference) {
      try {
        if (preference) {
          let res = await this.$api.home.favorite({
            ...this.params[preference],
            preference,
          });
          if (res.code === 1) {
            let obj = res.source[0];
            this.list.forEach((item) => {
              if (item.preference == obj.preference) {
                item.bookList.current = obj.bookList.current;
                item.bookList.records.push(...obj.bookList.records);
              }
            });
          }
        } else {
          let res = await this.$api.home.favorite(this.params[this.active]);
          if (res.code === 1) {
            this.list = res.source;
          }
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 加载更多
    loadMore(key) {
      try {
        this.params[key].pageNum += 1;
        this.favorite(key);
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.favorite {
  width: 1200px;
  margin: 48px auto;
  .tab-content {
    ::v-deep .el-tabs__header {
      margin: 0;
      .el-tabs__nav {
        padding-bottom: 15px;
        .el-tabs__active-bar {
          height: 4px;
          background-color: #e86472;
        }
        .el-tabs__item {
          color: #333333;
          font-size: 24px;
          font-weight: 600;
          line-height: 40px;
          font-family: Poppins-SemiBold, Poppins;
        }
      }
    }
    .info-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      &::after {
        content: "";
        width: 380px;
      }
      .list-template {
        width: 380px;
        margin-top: 56px;
        position: relative;
        padding: 5px 17px 18px 16px;
        border-radius: 16px;
        background: linear-gradient(90deg, #ffe3e6 0%, #ffffff 100%);
      }
    }
    .load-more {
      margin: 56px 0;
      cursor: pointer;
      font-size: 26px;
      line-height: 30px;
      text-align: center;
      color: #e86472;
    }
    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .empty {
      height: 500px;
      line-height: 500px;
      text-align: center;
    }
  }
}
</style>
